<template>
  <Layout :class="'bg-white p-2'">
    <!-- 第一层  添加按钮以及全局搜索框 -->
    <Row :class="'m-0'">
      <Col span="5">
        <div class="search">
          <label>总应收:{{ ressultList.total }}</label>
        </div>
      </Col>
      <Col span="5">
        <div class="search">
          <label>实收:{{ ressultList.allpayable }}</label>
        </div>
      </Col>
      <Col span="5">
        <div class="search">
          <label>未收:{{ ressultList.allreceivable }}</label>
        </div>
      </Col>
      <Col span="2">
        <Button
          class="m-2 w-75"
          type="primary"
          shape="circle"
          @click="searchPaymentItemList()"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <!-- 第二行 -->
    <Row :class="'m-0'">
      账单查看：
      <Col span="4">
        <label>应收:{{ ressultList.timeReceivable }}</label>
      </Col>
      <Col span="4">
        <label>未收:{{ ressultList.uncollected }}</label>
      </Col>
    </Row>
    <Row :class="'m-0'">
      账单查看：
      <Col span="4">
        <Button class="m-2 w-75" type="primary" shape="circle" @click="today()"
          >今天</Button
        >
      </Col>
      <Col span="4">
        <Button
          class="m-2 w-75"
          type="primary"
          shape="circle"
          @click="thisWeek()"
          >本周</Button
        >
      </Col>
      <Col span="4">
        <Button
          class="m-2 w-75"
          type="primary"
          shape="circle"
          @click="thisMonth()"
          >本月</Button
        >
      </Col>
      <Col span="4">
        <Button
          class="m-2 w-75"
          type="primary"
          shape="circle"
          @click="lastMonth()"
          >上月</Button
        >
      </Col>
    </Row>
    <Row :class="'m-0'">
      查询区间：
      <Col span="3">
        <Date-picker
          :class="'w-100 m-2'"
          type="datetime"
          v-model="PaymentItemList.startTime"
          placeholder="申请开始时间"
          transfer
        >
        </Date-picker>
      </Col>
      <div class="to">至</div>
      <Col span="3">
        <Date-picker
          :class="'w-100 m-2'"
          type="datetime"
          v-model="PaymentItemList.endTime"
          placeholder="申请结束时间"
          transfer
        >
        </Date-picker>
      </Col>
    </Row>

    <Layout :class="'bg-white'">
      <Table
        disabled-hover
        border
        :class="'m-1'"
        :columns="columnInfo"
        :data="resultPaymentItemList"
      >
        <!-- 下拉菜单 -->
        <template slot-scope="{ row, index }" slot="action">
          <Dropdown class="bottom" transfer disabled-hover trigger="click">
            <Button type="primary">· · ·</Button>
            <DropdownMenu slot="list">
              <DropdownItem>
                <Button type="error" @click="pass(row)">取消</Button>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <Page
        class="pages"
        :class="'m-2 text-right'"
        :page-size="PaymentItemList.size"
        @on-change="pageSearch"
        :total="PaymentItemList.total"
        :current="PaymentItemList.page"
        show-sizer
        @on-page-size-change="changeSize"
      />
    </Layout>
    <Row :class="'m-0'">
      <Col span="4">
        <label>合计:{{ ressultList.timeTotalReceivable }}</label>
      </Col>
    </Row>
  </Layout>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    let self = this
    return {
      visible: false,
      alllist: 'height: 90px;transition:all linear .1s;overflow:hidden',
      apart: 'height: 130px;transition:all linear .1s',
      isShow: true,
      PaymentItemList: {
        page: 1,
        size: 10,
        total: 0,
        pageSize: '',
        time: '',
        startTime: '',
        endTime: '',
      },
      projectServiceList: [],
      paymentOptionList: [],
      columnInfo: [
        {
          title: '#',
          width: 80,
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              params.index +
                (self.PaymentItemList.page - 1) * self.PaymentItemList.size +
                1
            )
          },
        },
        {
          title: '日期',
          key: 'payDate',
          width: 250,
          fixed: 'left',
        },
        {
          title: '学生姓名',
          key: 'name',
          width: 100,
          fixed: 'left',
        },
        {
          title: '期数',
          key: 'number',
          width: 200,
        },
        {
          title: '学费收入',
          key: 'receivable',
          width: 200,
        },
        {
          title: '服务费收入',
          key: 'service',
          width: 200,
        },
        {
          title: '合计收入',
          key: 'payable',
          width: 150,
        },
      ],
      ressultList: {},
      resultPaymentItemList: [],
      autorUserId: '',
      autorList: [],
      modal2: false,
      nowDate: '',
      currentTime: new Date(),
      isSelectAutor: true,
    }
  },
  methods: {
    today: function() {
      this.PaymentItemList.time = 'today'
      this.searchPaymentItemList()
    },
    thisWeek: function() {
      this.PaymentItemList.time = 'thisWeek'
      this.searchPaymentItemList()
    },
    thisMonth: function() {
      this.PaymentItemList.time = 'thisMonth'
      this.searchPaymentItemList()
    },
    lastMonth: function() {
      this.PaymentItemList.time = 'lastMonth'
      this.searchPaymentItemList()
    },
    showPersonDetail: function(row) {
      console.log(row)
      this.$router.push({
        name: 'student_detail',
        params: {
          row,
        },
      })
    },
    showAll: function() {
      this.isShow = !this.isShow
    },
    showPart: function() {
      this.isShow = !this.isShow
    },
    init: function() {
      this.$data.PaymentItemList.page = 1
      this.searchPaymentItemList()
      this.getTime()
    },
    getTime() {
      const date = new Date()
      const year = date.getFullYear()
      const month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hour = date.getHours()
      const mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      const ss =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      this.nowDate =
        year + '-' + month + '-' + day + ' ' + hour + ':' + mf + ':' + ss
    },

    searchPaymentItemList: function() {
      this.http
        .get({
          url: '/paymentItem/list',
          param: { paymentItem: this.PaymentItemList },
        })
        .then((data) => {
          console.log(data)
          this.$data.PaymentItemList.page = data.pageInfo.page
          this.$data.PaymentItemList.size = data.pageInfo.size
          this.$data.PaymentItemList.total = data.pageInfo.total
          this.$data.PaymentItemList.totalPage = data.pageInfo.totalPage
          this.$data.resultPaymentItemList = parseDataObj(data)
          this.$data.ressultList = data
          this.PaymentItemList.time = null
        })
    },
    pageSearch: function(changedPage) {
      this.$data.PaymentItemList.page = changedPage
      this.searchPaymentItemList()
    },
    changeSize: function(changeSize) {
      this.$data.PaymentItemList.size = changeSize
      this.searchPaymentItemList()
    },
  },
  created: function() {
    //从session中取出用户列表
    let userList = JSON.parse(localStorage.getItem('USER_LIST'))
    userList.forEach((user) => {
      let u = {
        value: user.userId,
        label: user.nickName,
      }
      this.autorList.push(u)
    })
    //在session中取出当前用户权限并校验绑定跟进人条件检索的选择框
    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
    currentUser.permissions.forEach((twopermission) => {
      twopermission.permissions.forEach((per) => {
        if (per.name == '可分配') {
          this.isSelectAutor = false
        }
      })
    })
    this.init()
  },
}

/*
      	此函数主要解析返回的data，将复杂的级联对象封装为resultBaomingList所对应的字段的对象
      */
function parseDataObj(data) {
  var PaymentItemArray = []

  data.list.forEach((list) => {
    let poko = {
      name: list.student.name,
      payDate: list.paymentItem.payDate,
      number: list.number,
      receivable: list.paymentItem.receivables,
      service: list.paymentItem.service,
      payable: list.paymentItem.payable,
    }
    PaymentItemArray.push(poko)
  })
  return PaymentItemArray
}
</script>

<style scoped>
.to {
  padding: 10px 10px 0px 30px;
}

.search {
  margin-right: 5px;
}
.hidden {
  position: relative;
  top: 2px;
  cursor: pointer;
  color: gray;
  font-size: 12px;
  padding: 0px 0px 0px 1050px;
}

.bottom {
  text-align: center;
  z-index: 0;
}
.ivu-select-dropdown button {
  display: block;
  margin: 5px 10px;
  width: 120px;
}
.ivu-select-dropdown .ivu-dropdown-item {
  padding: 0;
}
.ivu-table .demo-table-row2 td {
  background-color: white;
}
</style>
<style>
.ivu-select-dropdown {
  max-height: 325px;
}
.ivu-table .demo-table-row td {
  background-color: #f1939c;
  color: #ffffff;
}
</style>
